<template>
    <el-row>
        <el-col :span="12" offset="2">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <h2>个人博客</h2>
                    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                </div>
                <!-- <div class ="search">

                </div> -->

                <v-for v-for="item in articles" :key="item" class="text item">
                    <div class="articlediv">
                    <h2>标题：{{ item.title }}</h2>
                    <h4>描述：{{ item.description }}</h4>
                    <h4 v-if="item.authentic">状态：公开</h4>
                    <h4 v-else>状态：私密</h4>
                    <img v-for="url in item.imageUrlList" :src="url" class="aticleImage" />
                    <mavonEditor v-model="item.content" :subfield="false" :boxShadow="true" defaultOpen="preview"
                        :toolbarsFlag="true" style="min-height: 200px"></mavonEditor>
                    <el-row style="margin-top: 10px;">
                        <el-col :span="2" offset="18">
                            <el-button type="primary">删除</el-button>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="primary" @click ="update(item.id)">修改</el-button>
                        </el-col>
                        <el-col :span="2" v-show="!item.authentic">
                            <el-button type="primary"  @click="mchangeStatus(item.id,1)">公开</el-button>
                        </el-col>
                        <el-col :span="2" v-show="item.authentic">
                            <el-button type="primary"  @click="mchangeStatus(item.id,0)">设为私有</el-button>
                        </el-col>
                    </el-row>
                    </div>
                </v-for>
            </el-card>
        </el-col>
    </el-row>
</template>
1·21
<script>
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
import { Message } from 'element-ui';
import { listArticleByUserId,changeStatus } from "@/api/article/queryTag";
export default {
    components: { mavonEditor, Message },
    props: [],
    data() {
        return {
            input: '',
            articles: {},
            user:{}
        }
    },
    computed: {},
    watch: {},
    created() {
        this.listArticleByUserIds();
    },
    mounted() { },
    methods: {
        listArticleByUserIds: function () {
            listArticleByUserId().then(res => {
                let data = res.data;
                let code = res.code;
                let message = res.message;
                if (code == 200) {
                    this.articles = data;
                    console.log(this.articles);
                }
            });
        },
        mchangeStatus:function (id,status) {
            changeStatus(id,status).then(res=>{
                if (res.code == 200) {
                    this.$message.success("文章状态已变更...");
                    this.listArticleByUserIds();
                }
            })
        },
        update:function(id) {
            this.$router.push({
                path: '/aticle/pulish',
                query:{
                    id:id
                }
            })

        }

    }
}
</script>



<style>
.text {
    font-size: 14px;
}

.icon {
    padding-top: 5px;
    text-align: center;
    font-size: 30px;
}
.articlediv {
  border-radius: 25px;
  border-style: solid;
  border-color: rgba(0, 0, 0,0.2);
  padding: 20px; 
  margin-bottom: 40px;
}
.aticleImage {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    margin-top: 10px;
    border-radius: 15px;
}

.item {
    margin-bottom: 100px;
}


.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 160%;
}

.chat {
    border-radius: 10px;
}
</style>